---
import GridItem from '../../components/GridItem.astro';
import SimplePageHeader from '../../components/SimplePageHeader.astro';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getAllBestPractices } from '../../lib/best-pratice';

const bestPractices = await getAllBestPractices();
---

<BaseLayout
  title='Best Practices'
  description={'Best practices on different topics with detailed implementation guidelines'}
  permalink={'/best-practices'}
>
  <SimplePageHeader
    title='Best Practices'
    description='Best practices on different topics with detailed implementation guidelines'
  />

  <div class='bg-gray-100 pt-4 pb-14 sm:pt-8 sm:pb-16'>
    <div class='container'>
      <div class='grid grid-cols-1 sm:grid-cols-2 gap-0.5 sm:gap-3'>
        {
          bestPractices.map((bestPractice) => (
            <GridItem
              url={`/best-practices/${bestPractice.id}`}
              isNew={bestPractice.frontmatter.isNew}
              title={bestPractice.frontmatter.briefTitle}
              description={bestPractice.frontmatter.description}
            />
          ))
        }
      </div>
    </div>
  </div>
</BaseLayout>
